<template>
  <div class="workInstructionLibrary flowCloumn h100">
    <div class="constentmain h100">
      <list-table-new v-bind="tableSetting" ref="klTable"></list-table-new>
    </div>
    <dialogPublic
      :title="'文件预览'"
      :show.sync="showPreview"
      appendTobody
      fullscreen
      noFootBtn
      @doClose="() => (showPreview = false)"
    >
      <preview :fileObj="currentAttach" v-if="showPreview"></preview>
    </dialogPublic>
  </div>
</template>
<script>
import { queryInstructionList } from "@/api/standardManagement/workInstructionLibrary.js";
import preview from "@/components/attach/preview";
export default {
  components: { preview },
  props: {
    selectData: {
      type: Array,
      default: () => {
        return [];
      },
    },
    searchData: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      showPreview: false,
      tableSetting: {
        selectionShow: true,
        showFilterBtn: false,
        showCustomBtn: false,
        searchObj: {
          searchMethod: (params, sortStr) => {
            this.getTableData(params, sortStr);
          },
          queryData: {
            page: 1,
            pageSize: 15,
            publicStatus: 1,
          },
          searchArr: [
            {
              type: "input",
              label: "文件名",
              model: "name",
              placeholder: "请输入文件名",
            },
            {
              type: "deviceClassify",
              label: "设备分类",
              model: "typeName",
              idsStr: "typeId",
            },
          ],
        },
        actionList: [],
        tableMethods: {
          //点击行的方法
          rowClick: (row) => {},
        },
        column: [
          {
            label: "作业指导书文件名",
            prop: "name",
            sortable: "custom",
          },
          {
            label: "设备分类",
            prop: "typeName",
            sortable: "custom",
          },
          {
            label: "作业类型",
            prop: "group",
            sortable: "custom",
            formatter: (row) => {
              return this.$store.getters.fineDirtDataName(
                "standard_instruction_type",
                row.group
              );
            },
          },
          {
            label: "操作",
            textAlign: "center",
            type: "button",
            buttonArr: [
              {
                text: "预览",
                isShow: (row) => {
                  return true;
                },
                methods: (row, index) => {
                  this.previewFile(row);
                },
              },
            ],
          },
        ],
      },
      typeObj: {
        imge: ["jpg", "jpeg", "gif", "bmp", "png"],
        pdf: ["pdf"],
        video: ["mp4", "m2v", "mkv", "rmvb", "wmv", "avi", "flv", "mov", "m4v"],
        html: ["htm", "html"],
        docx: ["doc", "docx", "docm", "dotx", "dotm"],
        xlsx: ["xls", "xlsx", "xlsm", "xltx", "xltm", "xlsb", "xlam"],
        // txt:["txt"],
        pptx: ["ppt", "pptx", "pot", "potx", "pptm", "ppsx", "ppsm"],
        zip: ["zip", "rar", "7z", "7-zip", "tar", "gzip", "bz2", "jar"],
      },
    };
  },
  created() {
    this.tableSetting.searchObj.queryData = Object.assign(this.tableSetting.searchObj.queryData, this.searchData);
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      this.$refs.klTable.searchData();
    },
    getTableData(params, sortStr) {
      let queryData = Object.assign({}, params);
      if (sortStr.length > 0) {
        queryData.orders = sortStr;
      }
      queryData.appids = [this.$store.getters.currentAppInfo.appId];
      queryInstructionList(queryData).then((res) => {
        this.$set(this.tableSetting, "tableData", res.data.records);
        this.$set(this.tableSetting, "totalNumber", res.data.total);
        if (this.selectData.length > 0) {
          this.setSelectRow(res.data.records);
        }
      });
    },
    //默认选中行
    setSelectRow(data) {
      data.map((i) => {
        if (this.selectData.includes(i.id)) {
          this.$refs.klTable.selectioned(i);
        }
      });
    },
    //预览
    previewFile(file) {
      let { extension, path } = file;
      let type = "";
      for (const key in this.typeObj) {
        //循环遍历typeObj
        let arr = this.typeObj[key];
        if (arr.includes(extension)) {
          //比较找到typeObj相应的后缀名，从而判断它属于哪个类型
          type = key;
        }
      }
      if (["imge", "pdf", "video", "html"].includes(type)) {
        let row = JSON.parse(JSON.stringify(file));
        row.id = row.path;
        this.currentAttach = row;
        this.showPreview = true;
      } else {
        this.$confirm(`该文件暂不支持预览，是否直接下载？`, "提示", {
          confirmButtonText: "立即下载",
          cancelButtonText: "取消",
          type: "warning",
        }).then(() => {
          this.downloadFile(file);
        });
      }
    },
    //获取选中数据
    getselectData() {
      let data = this.$refs.klTable.getSelectData();
      return data;
    },
  },
};
</script>
<style lang="less" scoped>
.workInstructionLibrary {
  text-align: center;
  padding: 10px;
  .constentmain {
    // margin-left: 10px;
  }
  .upload-file {
    margin-left: 32px;
    text-align: left;
    display: flex;
    label {
      margin-right: 12px;
    }
  }
}
.flowCloumn {
  display: flex;
  flex-flow: column nowrap;
}
</style>
